import React from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ListView,
  Alert,
} from 'react-native';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import BaseComponent from '../common/BaseComponent';
import LoginCheckIsUserAction from '../../actions/login/LoginCheckIsUserAction';

//类似聊天页面用的输入栏
export default class CommonInputBarView extends BaseComponent {
  constructor(props) {
    super(props);

    this.state.comment = "";
    this.state.inputContentheight = 100;
  }

  reset() {
    this.setState({
      comment:"",
    })
  }

  render() {
    return (
      <View style={{
        flexDirection:"row",
        alignItems:"center",
        justifyContent:"space-between",
        backgroundColor:"#ffffff",
        paddingTop: SizeUtils.translateDesignHeightToCode(10),
        marginBottom: SizeUtils.translateDesignHeightToCode(10),
        paddingLeft:SizeUtils.translateDesignWidthToCode(20),
        paddingRight:SizeUtils.translateDesignWidthToCode(20),
        width:this.props.style.width,
        height: Math.max(SizeUtils.translateDesignHeightToCode(104), this.state.inputContentheight + SizeUtils.translateDesignHeightToCode(8)),
        shadowColor: '#000000',
        shadowOffset: {
          width: 0,
          height: SizeUtils.translateDesignNumToCode(5),
        },
        shadowRadius: SizeUtils.translateDesignNumToCode(10),
        shadowOpacity: 0.1,
        }}>
        <TextInput
          style={{padding:0,flex:1,
            fontSize:SizeUtils.translateFontSizeToCode(30),
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),
            lineHeight:SizeUtils.translateDesignHeightToCode(60),
            borderWidth:SizeUtils.translateDesignNumToCode(4),
            borderRadius: SizeUtils.translateDesignNumToCode(10),
            borderColor:"#eeeeee",
            height: Math.max(SizeUtils.translateDesignHeightToCode(96), this.state.inputContentheight),
            // alignItems:"center",
            paddingTop:SizeUtils.translateDesignHeightToCode(20),
            paddingBottom:SizeUtils.translateDesignHeightToCode(20),
            }}
          onChangeText = {(comment) => this.setState({comment})}
          placeholder = "输入内容"
          multiline = {false}
          onSubmitEditing = {() => this._sendComment()}
          value = {this.state.comment}
          underlineColorAndroid="transparent"
          multiline = {true}
          onContentSizeChange={this._onInputContentSizeChange.bind(this)}
        />
        <TouchableOpacity onPress = {() => this._sendComment()}
          disabled = {this.state.viewStatus == 2}
          style = {{ backgroundColor:"#D93338",
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          height: Math.max(SizeUtils.translateDesignHeightToCode(70), 0 ),
          width: SizeUtils.translateDesignWidthToCode(130),
          borderRadius: SizeUtils.translateDesignNumToCode(10),
          marginLeft:SizeUtils.translateDesignWidthToCode(26),
          }}
          >
          <Text style={{ borderWidth:0,
            color: '#ffffff',
            fontSize:SizeUtils.translateFontSizeToCode(30)}}>
            发送
          </Text>
        </TouchableOpacity>
      </View>
    )
  }

  _onInputContentSizeChange(event) {
    this.setState({inputContentheight: event.nativeEvent.contentSize.height});
  }

  _sendComment() {
    if(this.state.comment == "") {
      ToastUtils.show("内容不能为空");
      return;
    }
    new LoginCheckIsUserAction().call(this, {content:"你是游客身份，不能聊天"}, this._onCheckIsUserCallback.bind(this))
  }

  _onCheckIsUserCallback(result) {
    if(result) {
      this.props.onSend(this.state.comment);
    }
  }
}
